<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<center id="app">
    <table border="1">
        <tr>
            <th colspan="5">employee list(<a th:href="@{/to/add}">添加员工</a>)</th>
        </tr>
        <tr>
            <th>id</th>
            <th>lastName</th>
            <th>email</th>
            <th>gender</th>
            <th>操作</th>
        </tr>

        <tr th:each="employee:${employees}">
            <td th:text="${employee.id}"></td>
            <td th:text="${employee.lastName}"></td>
            <td th:text="${employee.email}"></td>
            <td th:text="${employee.gender}"></td>
            <td>
                <a th:href="@{'/employee/'+${employee.id}}">修改</a>
                <a @click="deleteEmployee" th:href="@{'/employee/'+${employee.id}}">删除</a></td>
        </tr>
    </table>
</center>
<form method="post">
    <input type="hidden" name="_method" th:value="delete">
</form>
<script th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript">
    var vue=new Vue({
        el:"#app",
        methods:{
            deleteEmployee(){
                let form = document.getElementsByTagName("form")[0];
                form.action=event.target.href;
                form.submit();
                event.preventDefault();
            }
        }
    })
</script>
</body>
</html>